<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">菜单管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 100px;">
						<div class="input-group-btn">

							<button type="button" class="btn btn-default btn-delete">删除</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table id="menuTable" class="table table-hover">
					<thead>
						<tr>
							<th data-field="selectItem" data-checkbox="true"></th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript"
	src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<!-- 借助了树结构（treegrid） -->
<script type="text/javascript"
	src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript"
	src="bower_components/treegrid/tree.table.js"></script>
<script type="text/javascript">
	/**
	 * 初始化表格的列
	 */
	var columns = [ {
		field : 'selectItem',
		radio : true
	}, {
		title : '菜单ID',
		field : 'id',
		visible : false,
		align : 'center',
		valign : 'middle',
		width : '80px'
	}, {
		title : '菜单名称',
		field : 'name',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '130px'
	}, {
		title : '上级菜单',
		field : 'parentName',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '100px'
	}, {
		title : '类型',
		field : 'type',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '70px',
		formatter : function(item, index) {
			if (item.type == 1) {
				return '<span class="label label-success">菜单</span>';
			}
			if (item.type == 2) {
				return '<span class="label label-warning">按钮</span>';
			}
		}
	}, {
		title : '排序号',
		field : 'sort',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '70px'
	}, {
		title : '菜单URL',
		field : 'url',
		align : 'center',
		valign : 'middle',
		sortable : true,
		width : '160px'
	}, {
		title : '授权标识',
		field : 'permission',
		align : 'center',
		valign : 'middle',
		sortable : true
	} ];
	$(function() {
		doGetObjects();
		$(".input-group-btn").on("click", '.btn-delete', doDeleteObject)
		.on("click",'.btn-add,.btn-update',doLoadEditUI)//点击add、update都执行doLoadEditUI操作
	})
function doLoadEditUI(){
		var title;
		//定义页面标题
		if($(this).hasClass("btn-add")){
		 title="添加菜单";			
		}else{
			title="修改菜单";
			/*这种方法是直接从页面上获取数据，不用从数据库获取数据*/   
			//获得选中的input对象
			var input=$("tbody input[type='radio']:checked");//tbody标签下的input标签用的是属性选择器
			//获得当前行绑定的数据
			var rowData=input.parents("tr").data("rowData")
			//console.log(rowData)
			$("#mainContentId").data("rowData",rowData);
			
		}
		
		//异步加载编辑页面
		var url="menu/doMenuEditUI.do"
		$("#mainContentId").load(url,function(){
			$(".box-title").html(title)
		})
	}
	function doDeleteObject() {
		//获取用户选中的菜单id
		var id = doGetCheckedId();
		//对结果进行验证
		if (!id) {
			alert("请先选择一个");
			return;
		}
		//发送异步请求执行删除操作
		var url = "menu/doDeleteObject.do";
		var params = {
			id : id
		};
		console.log(params);
		$.post(url, params, function(result) {
			console.log(result);
			if (result.state == 1) {
				alert(result.message);
				doGetObjects();
			} else {
				alert(result.message);
			}
		})
	}
	//获取选中的id
	function doGetCheckedId() {
		//1.获取选中的对象
		var nodes = $("#menuTable").bootstrapTreeTable("getSelections");
		
		console.log(nodes);
		//2
		if (nodes.length == 1) {//
			return nodes[0].id;
		}

	}
	function doGetObjects() {
		//构建TreeTable对象（treegrid插件提供）
		var treeTable = new TreeTable("menuTable",//tableId,前面的#底层会自动添加,TreeTable是个插件，里面封装了ajax
		"menu/doFindObjects.do",//url
		columns);//table columns
		//treeTable.setExpandColumn(2);
		//初始化treeTable，此时底层会发异步请求
		treeTable.init();
	}

	/* $(function(){
	 doGetObjects();
	 $(".input-group-btn")
	 .on("click",".btn-delete",doDeleteObject)
	 .on("click",".btn-add,.btn-update",doAddOrUpdate);
	 })
	 function doAddOrUpdate(){
	 var title;
	 if($(this).hasClass("btn-add")){
	 title="添加菜单";
	 doLoadEditPage(title);
	 }else if($(this).hasClass("btn-update")){
	 title="修改菜单";
	 var id=doGetCheckedId();
	 if(!id){
	 alert("请先选择");
	 return;
	 }
	 $(".container-fluid").data("id",id);
	 doLoadEditPage(title);
	 }
	 }
	 function doLoadEditPage(title){
	 var url="menu/editUI.do";
	 $(".container-fluid").load(url,function(){
	 $(".box-title").html(title);
	 })
	 }
	 function doDeleteObject(){
	 //1.url
	 var url="menu/doDeleteObject.do";
	 //2.params
	 var id=doGetCheckedId();
	 if(!id){
	 alert("请先选择一条记录");
	 return;
	 }
	 var params={"id":id};
	 //3.post
	 $.post(url,params,function(result){
	 if(result.state==1){
	 alert(result.message);
	 doGetObjects();
	 }else{
	 alert(result.message);
	 }
	 })
	 }
	 function doGetCheckedId(){
	 //获取选中的记录对象
	 var selections=$("#menuTable")
	 //这个函数固定写法，记住即可
	 //假如要理解这个方法可参考jquery.treegrid.extension.js
	 .bootstrapTreeTable("getSelections");
	 //判定是否有选中的
	 if(selections.length>0){
	 //返回选中记录的id值
	 return selections[0].id;
	 }
	 }
	 function doGetObjects(){
	 //1.构建treeTable对象
	 var tableId="menuTable";
	 var url="menu/doFindObjects.do";
	 var treeTable=
	 new TreeTable(tableId, url, columns)
	 //2.初始化treeTable
	 treeTable.setExpandColumn(2);//设置可展开的列，默认为1
	 treeTable.init();
	 } */
</script>
